@charset "utf-8";

@import url(./common.less);

@import url(./header.less);

@import url(./footer.less);

nav {
	position: absolute;
	top: 0px;
	z-index: 10;
	background-color: #fff;
}

body {
	padding-top: 88px;
}

.shop-box {
	width: 100%;
	padding: 40px 0 100px 0;
	background-color: #f5f5f5;

	.shop-center {
		width: 1120px;
		background-color: #fff;
		margin: auto;
		padding: 30px 40px;
		margin-top: 20px;

		h3 {
			color: #333;
			font-weight: bold;
			font-size: 18px;
			padding-bottom: 16px;
			border-bottom: 1px solid #ededed;
		}

		.shop-pro {
			height: 92px;
			padding: 14px 0;
			border-bottom: 1px solid #ededed;
			display: flex;
			align-items: center;

			li {
				&:first-child {
					width: 100px;

					.shop-check {
						margin: 0 auto;
						width: 25px;
						height: 25px;
						border-radius: 50%;
						border: 1px solid #dce1e4;
						cursor: pointer;
					}

					.checked {
						background: url(../images/shop/btn.png) no-repeat center center;
						border: 1px solid transparent;
					}
				}
			}

			.pro-img {
				a {
					display: block;
					width: 80px;
					height: 80px;
					padding: 0 70px 0 20px;

					img {
						width: 100%;
					}
				}
			}

			.pro-title {
				width: 284px;

				a {
					font-size: 14px;
					color: #333;
					transition: all .5s;

					&:hover {
						color: #acacac;
					}
				}
			}

			.pro-price {
				width: 220px;
				font-size: 14px;
				color: #333;
			}

			.pro-num {
				width: 148px;
				height: 42px;
				border: 1px solid #dce1e4;
				border-radius: 4px;

				div {
					float: left;
					width: 50px;
					height: 42px;
					position: relative;

					&:not(:nth-child(2)) {
						cursor: pointer;
					}

					&:nth-child(1)::after {
						content: '';
						position: absolute;
						display: inline-block;
						width: 12px;
						height: 2px;
						background: #666;
						left: 50%;
						margin-left: -6px;
						top: 50%;
						margin-top: -1px;
						transition: background-color 0.35s ease;
					}

					&:nth-child(2) {
						text-align: center;
						color: #333;
						font-size: 14px;
						line-height: 42px;
						font-weight: normal;
						width: 48px;
					}

					&:nth-child(3)::before {
						content: '';
						position: absolute;
						display: inline-block;
						width: 2px;
						height: 12px;
						background: #666;
						left: 50%;
						margin-left: -1px;
						top: 50%;
						margin-top: -6px;
						transition: background-color 0.35s ease;
					}

					&:nth-child(3)::after {
						content: '';
						position: absolute;
						display: inline-block;
						width: 12px;
						height: 2px;
						background: #666;
						left: 50%;
						margin-left: -6px;
						top: 50%;
						margin-top: -1px;
						transition: background-color 0.35s ease;
					}

				}

				.disable {
					cursor: not-allowed !important;
				}

				.disable::after,
				.disable::before {
					background: #b7b7b7 !important;
				}

			}

			.pro-delate {
				width: 156px;
				padding: 0 20px;

				a {
					display: block;
					width: 20px;
					height: 20px;
					background: url(../images/shop/delate.png) no-repeat center center;
					margin: 0 0 0 auto;
				}
			}
		}

		.shop-btnBox {
			padding: 50px 0 20px;

			>a {
				display: block;
				float: left;
				font-size: 14px;
				color: #333;
				line-height: 30px;
				transition: all .5s;

				&:hover {
					opacity: .6;
				}

				span {
					padding-left: 26px;
					background: url(../images/shop/gouwuche2.png) no-repeat center center;
					margin-right: 4px;
				}
			}

			>div {
				float: right;

				p {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					padding-bottom: 20px;

					>span {
						font-size: 14px;
						text-align: left;
					}

					strong {
						font-size: 30px;
						font-weight: bold;
						text-align: right;
						color: #333;

						span {
							font-size: 21px;
							margin-right: 2px;
						}
					}
				}

				div {
					a {
						margin: 0 0 0 auto;
						display: block;
						width: 196px;
						height: 60px;
						border-radius: 4px;
						text-align: center;
						line-height: 60px;
						font-size: 16px;
						color: #d0d0d0;
						background: #f8f8f8;
						transition: all .5s;
						cursor: not-allowed;
					}

					.actived {
						cursor: pointer;
						background: #f34141;
						color: #fff;

						&:hover {
							background: #FB6332;
						}
					}
				}
			}
		}

		.empty {
			height: 430px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.empty-img {
				height: 60px;
				margin-bottom: 25px;

				img {
					height: 100%;
				}
			}

			p {
				font-size: 14px;
				color: #666;
				text-align: center;
			}

			.empty-btn {
				margin-top: 60px;

				a {
					display: block;
					width: 196px;
					height: 60px;
					border-radius: 4px;
					text-align: center;
					line-height: 60px;
					font-size: 16px;
					background: #f34141;
					color: #fff;
					transition: all .5s;

					&:hover {
						background: #FB6332;
					}
				}
			}
		}
	}

	.shop-empty {
		margin: 0 auto;
	}
}

.aside {
	a {
		position: fixed;
		right: 0;
		bottom: 2vh;
		width: 40px;
		height: 159px;
		background: linear-gradient(228deg, #f03446 0%, #ff5b39 100%);
		opacity: .9;
		border-radius: 6px 0px 0px 6px;
		transition: all .3s;

		&:hover {
			opacity: 1;
			width: 48px;
		}

		&:hover>.pingfen {
			display: none;
		}

		&:hover>.pingfen-hover {
			display: block;
		}

		img {
			width: 22px;
			height: 19px;
			margin: 11px auto 4px;
		}

		.pingfen-hover {
			display: none;
		}

		p {
			padding-top: 4px;
			width: 16px;
			height: 105px;
			font-size: 15px;
			font-weight: 500;
			color: #fff;
			line-height: 21px;
			margin: 0 auto;
		}
	}
}